<template>
    <div class="row row--15 service-wrapper">
        <div class="col-lg-4 col-md-6 col-sm-12 col-12"
             v-for="(service, index) in serviceList"
             :key="index">
            <div :class="`service ${serviceStyle} ${checkTextAlign}`"
                 data-aos="fade-up"
                 data-aos-delay="70">
                <div class="inner">
                    <div class="content">
                        <!-- <h4 class="title" v-html="service.title">
                            <router-link to="/service-details" v-html="service.title"/>
                        </h4> -->
                        <p class="description" v-html="service.description"/>
                        <p class="description" v-html="service.list1"/>
                        <p class="description" v-html="service.list2"/>
                        <p class="description" v-html="service.list3"/>
                        <p class="description" v-html="service.list4"/>
                        <p class="description" v-html="service.list5"/>
                        <p class="description" v-html="service.list6"/>
                    </div>
                    <!-- <div class="image">
                        <img :src="service.image" alt="Service Images"/>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ServiceFive',
        props: {
            serviceStyle: {
                type: String
            },
            textAlign: {
                type: String,
                default: 'left'
            }
        },
        data() {
            return {
                serviceList: [
                    {
                        // image: require('@/assets/images/service/gallery-image-01.png'),
                        title: '短信接口服务',
                        description: '我们支持国内外发送验证码、各类通知以及会员短信推广等',
                        list1: '短信验证码服务',
                        list2: '短信通知类服务',
                        list3: '短信会员类服务',
                        list4: '短信行业类服务',
                        list5: '短信营销类服务',
                        list6: '短信游戏类服务',




                    },
                    {
                        // image: require('@/assets/images/service/gallery-image-02.png'),
                        title: '语音接口服务',
                        description: '本接口可以发送国内外各类语音识别、语义理解、合成服务等',
                        list1: '国内通知类语音业务',
                        list2: '提供隐私保护安全',
                        list3: '号码资源丰富',
                        list4: '通话质量高',
                        list5: '安全系数强',
                        list6: '保障客户权益',
                    },
                    {
                        // image: require('@/assets/images/service/gallery-image-03.png'),
                        title: '要素核验类',
                        description: '本接口可以提供二要素三要素四要素等要素核验类服务',
                        list1: '短信验证码服务',
                        list2: '短信通知类服务',
                        list3: '短信会员类服务',
                        list4: '短信行业类服务',
                        list5: '短信营销类服务',
                        list6: '短信游戏类服务',
                    }
                ]
            }
        },
        computed: {
            checkTextAlign() {
                if (this.textAlign === 'left') return 'text-start';
                else if (this.textAlign === 'center') return 'text-center';
                else if (this.textAlign === 'end') return 'text-end';
                else return '';
            }
        }
    }
</script>